<template>
  <div class="">
    <div class="display-flex">
      <div class="flex1">
        <div class="display-flex" style="flex-flow: column">
          <div class="" style="height: 200px;">
            <div class="">
              <div class="display-flex">
                <div v-for="(item, index) in qUi[2]" :key="index" :class="`flex-center q-block-back flex1 ${item.checked ? 'q-checked-back' : ''}`" />
              </div>
              <div class="display-flex">
                <div v-for="(item, index) in qUi[0]" :key="index" :class="`flex-center q-block flex1 ${ filterQ0(item.checked, Number(item.value)) }`">
                  {{ `${filterQ1(item.checked) + item.value } ${item.checked === 0 ? item.name: ""}` }}
                </div>
              </div>
              <div class="display-flex">
                <div :class="`flex-center q-block flex1 ${qUi[1][0].checked ? 'q-checked-return-true' : ''}`">
                  {{ `return true ${qUi[1][0].name}` }}
                </div>
                <div :class="`flex-center q-block flex1 ${qUi[1][1].checked ? 'q-checked-return-false' : ''}`">
                  {{ `return false ${qUi[1][1].name}` }}
                </div>
              </div>
            </div>
          </div>
          <div class="flex1">
            <ui-memery
              :memery="storeMemery"
              :program-time="programTime"
              :memery-need-border="memeryNeedBorder"
            />
          </div>
        </div>
      </div>
      <div class="width-500" style="">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="切换电源状态：" class="">
            <el-button v-if="!power" type="primary" icon="el-icon-video-play" circle @click="start" />
            <el-button v-else type="warning" icon="el-icon-video-pause" circle @click="stop" />
            <el-button type="danger" icon="el-icon-refresh-right" circle @click="refresh" />
          </el-form-item>
          <el-form-item label="周期时间(ms)">
            <el-input
              v-model="cycle"
              type="textarea"
              :rows="4"
              placeholder="请输入周期，如 5000 (ms)"
            />
          </el-form-item>
          <el-form-item label="需要查找的数">
            <el-input
              v-model="num"
              type="textarea"
              :rows="4"
              placeholder="如：110"
            />
          </el-form-item>
          <!-- <el-form-item label="输入纸带">
            <el-input
              v-model="newMemery"
              type="textarea"
              :rows="4"
              placeholder="如： 01100 "
            />
          </el-form-item> -->
          <el-form-item label="">
            <el-button type="success" round @click="submitInput">
              提交
            </el-button>
          </el-form-item>
          <el-form-item label="">
            <el-button type="success" round @click="setRandomInput">
              随机纸带
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * problem2
 */
import UiMemery from './UIMemery.vue';
import { randomString } from "@/utils/common";
export default {
  name: 'UserInterface',
  components: { UiMemery },
  props: {
    programTime: {
      type: Number,
      default() {
        return 0;
      }
    },
    memeryNeedBorder: {
      type: String,
      default() {
        return "[]";
      }
    },
    qUi: {
      type: Array,
      default() {
        return [];
      }
    },
    power: {
      type: Boolean,
      default() {
        return false;
      }
    },
    storeMemery: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      // power: false,
      form: {
      },
      cycle: "",
      num: "",
      // newMemery: ""
    };
  },
  watch: {
    // power(newDate) {
    //   this.setDate("power", newDate);
    // }
  },
  mounted() {
  },
  methods: {
    
    filterQ0(data, catchValue) {
      if (data === 1 && catchValue === 0) return "q-checked-block-c0";
      if (data === 1 && catchValue === 1) return "q-checked-block-c1";
      else if (data === 2) return "q-checking-block";
      else return "";
    },
    filterQ1(data) {
      if (data === 1) return "";
      else if (data === 2) return "匹配";
      else return "";
    },
    setDate(key, value) {
      this.$emit("changeData", {key, value});
    },
    refresh() {
      this.$emit("refreshProgram");
    },
    stop() {
      this.setDate("power", false);
    },
    start() {
      this.setDate("orderStatus", "q0");
      this.setDate("power", true);
    },
    setBorderNone() {
      this.setDate("memeryNeedBorder", []);
    },
    submitInput() {
      if (this.cycle) this.setDate("baseTime", Number(this.cycle));
      if (this.num) this.setDate("needFind", this.num),this.setBorderNone();
      // if (this.newMemery) this.setDate("memery", [...this.newMemery.split("").map(ele => {return Number(ele);}),-1,-1]),this.setBorderNone();
    },
    setRandomInput() {
      let input = this.getRandomInput(30);
      this.setDate("memery", input),this.setBorderNone();
    },
    getRandomInput(len) {
      let data = randomString(len);
      console.log(data);
      let str = "";
      data.split("").forEach(ele => {
        str += ele.charCodeAt().toString(2);
      });
      data = str.split("").map(ele => {return Number(ele);});
      data.push(-1,-1,-1);
      return data;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../styles/index";
.q-checked-block-c0{background:rgb(255, 243, 187);color:rgb(255, 213, 27);}
.q-checked-block-c1{background:rgb(255, 213, 27);color:rgb(255, 243, 187);}
.q-checking-block{background:rgb(169, 223, 255);}
.q-checked-return-true{background:rgb(169, 223, 255)}
.q-checked-return-false{background:rgb(235, 126, 126);color:#fff}
.q-block{height: 50px;border: 1px solid #eee;}
.q-block-back{height: 10px;border: 1px solid #eee;}
.q-checked-back{background:rgb(235, 116, 116);}
</style>